<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的风险</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container mt-4">
        <div class="row mb-3">
            <div class="col">
                <h2>我的风险</h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a th:href="@{/}" class="text-decoration-none">首页</a></li>
                        <li class="breadcrumb-item"><a th:href="@{/risk/list}" class="text-decoration-none">风险列表</a></li>
                        <li class="breadcrumb-item active" aria-current="page">我的风险</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row mb-3">
            <div class="col">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">我负责的风险</h5>
                        <div>
                            <a th:href="@{/risk/add}" class="btn btn-primary">
                                <i class="fa fa-plus"></i> 新增风险
                            </a>
                            <a th:href="@{/risk/list}" class="btn btn-outline-secondary ml-2">
                                <i class="fa fa-list"></i> 全部风险
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th scope="col">ID</th>
                                        <th scope="col">风险名称</th>
                                        <th scope="col">所属项目</th>
                                        <th scope="col">风险类型</th>
                                        <th scope="col">优先级</th>
                                        <th scope="col">状态</th>
                                        <th scope="col">更新时间</th>
                                        <th scope="col">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:if="${risks.empty}">
                                        <td colspan="8" class="text-center">暂无负责的风险</td>
                                    </tr>
                                    <tr th:each="risk : ${risks}">
                                        <td th:text="${risk.id}"></td>
                                        <td th:text="${risk.title}"></td>
                                        <td th:text="${risk.projectName}"></td>
                                        <td>
                                            <span th:if="${risk.type == 1}" class="badge badge-secondary">技术风险</span>
                                            <span th:if="${risk.type == 2}" class="badge badge-info">管理风险</span>
                                            <span th:if="${risk.type == 3}" class="badge badge-warning">商业风险</span>
                                            <span th:if="${risk.type == 4}" class="badge badge-danger">法律风险</span>
                                            <span th:if="${risk.type == 5}" class="badge badge-primary">其他风险</span>
                                        </td>
                                        <td>
                                            <span th:if="${risk.priority == 1}" class="badge badge-light">很低</span>
                                            <span th:if="${risk.priority == 2}" class="badge badge-info">低</span>
                                            <span th:if="${risk.priority == 3}" class="badge badge-secondary">中</span>
                                            <span th:if="${risk.priority == 4}" class="badge badge-warning">高</span>
                                            <span th:if="${risk.priority == 5}" class="badge badge-danger">很高</span>
                                        </td>
                                        <td>
                                            <span th:if="${risk.status == 1}" class="badge badge-secondary">已识别</span>
                                            <span th:if="${risk.status == 2}" class="badge badge-primary">已分配</span>
                                            <span th:if="${risk.status == 3}" class="badge badge-info">已计划</span>
                                            <span th:if="${risk.status == 4}" class="badge badge-warning">监控中</span>
                                            <span th:if="${risk.status == 5}" class="badge badge-success">已解决</span>
                                            <span th:if="${risk.status == 6}" class="badge badge-danger">已关闭</span>
                                        </td>
                                        <td th:text="${risk.updateTime != null ? #dates.format(risk.updateTime, 'yyyy-MM-dd HH:mm') : '-'}"></td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a th:href="@{/risk/{id}(id=${risk.id})}" class="btn btn-info">
                                                    <i class="fa fa-eye"></i> 详情
                                                </a>
                                                <a th:href="@{/risk-response/add/{id}(id=${risk.id})}" class="btn btn-success">
                                                    <i class="fa fa-plus-circle"></i> 响应
                                                </a>
                                                <button type="button" class="btn btn-warning" 
                                                        th:data-risk-id="${risk.id}"
                                                        th:data-risk-name="${risk.title}"
                                                        th:data-risk-status="${risk.status}"
                                                        data-toggle="modal" data-target="#statusModal">
                                                    <i class="fa fa-refresh"></i> 状态
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mb-3">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">风险状态统计</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-2 mb-3">
                                <div class="card bg-secondary text-white">
                                    <div class="card-body text-center">
                                        <h3 th:text="${status1Count != null ? status1Count : 0}"></h3>
                                        <p class="mb-0">已识别</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 mb-3">
                                <div class="card bg-primary text-white">
                                    <div class="card-body text-center">
                                        <h3 th:text="${status2Count != null ? status2Count : 0}"></h3>
                                        <p class="mb-0">已分配</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 mb-3">
                                <div class="card bg-info text-white">
                                    <div class="card-body text-center">
                                        <h3 th:text="${status3Count != null ? status3Count : 0}"></h3>
                                        <p class="mb-0">已计划</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 mb-3">
                                <div class="card bg-warning text-white">
                                    <div class="card-body text-center">
                                        <h3 th:text="${status4Count != null ? status4Count : 0}"></h3>
                                        <p class="mb-0">监控中</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 mb-3">
                                <div class="card bg-success text-white">
                                    <div class="card-body text-center">
                                        <h3 th:text="${status5Count != null ? status5Count : 0}"></h3>
                                        <p class="mb-0">已解决</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 mb-3">
                                <div class="card bg-danger text-white">
                                    <div class="card-body text-center">
                                        <h3 th:text="${status6Count != null ? status6Count : 0}"></h3>
                                        <p class="mb-0">已关闭</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 状态更新模态框 -->
    <div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="statusModalLabel">更新风险状态</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>风险: <span id="riskName"></span></p>
                    <div class="form-group">
                        <label for="statusSelect">选择新状态</label>
                        <select class="form-control" id="statusSelect">
                            <option value="1">已识别</option>
                            <option value="2">已分配</option>
                            <option value="3">已计划</option>
                            <option value="4">监控中</option>
                            <option value="5">已解决</option>
                            <option value="6">已关闭</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" id="updateStatusBtn" class="btn btn-primary">更新状态</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(function() {
            // 记录当前选中的风险ID
            var currentRiskId = '';
            
            // 打开模态框时设置风险信息
            $('#statusModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var riskId = button.data('risk-id');
                var riskName = button.data('risk-name');
                var riskStatus = button.data('risk-status');
                
                currentRiskId = riskId;
                $('#riskName').text(riskName);
                $('#statusSelect').val(riskStatus);
            });
            
            // 更新状态按钮点击事件
            $('#updateStatusBtn').click(function() {
                var newStatus = $('#statusSelect').val();
                
                // 发送请求更新状态
                $.ajax({
                    url: '/risk-management/risk/status/' + currentRiskId + '/' + newStatus,
                    type: 'POST',
                    success: function(response) {
                        if (response.code === 200) {
                            // 关闭模态框并刷新页面
                            $('#statusModal').modal('hide');
                            location.reload();
                        } else {
                            alert(response.message || '更新状态失败');
                        }
                    },
                    error: function() {
                        alert('系统错误，请稍后再试');
                    }
                });
            });
        });
    </script>
</body>
</html> 